{% load static %}
<html>
<head>
    <title> new document </title>
    <meta charset="utf-8"/>
    <meta name="generator" content="editplus">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <script src="{% static 'app01/js/jquery-3.6.0.js' %}"></script>
    <link href="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.35/dist/css/bootstrap.min.css"
          rel="stylesheet">
    <link rel="stylesheet" href="{% static 'app01/bootstrap5.1.3/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'app01/css/new_row_input.css' %}">
    <meta name="description" content="">
    <script>
        function findObj(theObj, theDoc) {
            var p, i, foundObj;
            if (!theDoc) {
                theDoc = document;
            }

            if ((p = theObj.indexOf("?")) > 0 && parent.frames.length) {
                theDoc = parent.frames[theObj.substring(p + 1)].document;
                theObj = theObj.substring(0, p);
            }

            if (!(foundObj = theDoc[theObj]) && theDoc.all) {
                foundObj = theDoc.all[theObj];
            }

            for (i = 0; !foundObj && i < theDoc.forms.length; i++) {
                foundObj = theDoc.forms[i][theObj];
            }

            for (i = 0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++) {
                foundObj = findObj(theObj, theDoc.layers[i].document);
            }

            if (!foundObj && document.getElementById) {
                foundObj = document.getElementById(theObj);
                return foundObj;
            }
        }


        //删除指定行
        function DeleteSignRow(rowid) {
            var signFrame = findObj("SignFrame", document);
            var signItem = findObj(rowid, document);

            //获取将要删除的行的Index
            var rowIndex = signItem.rowIndex;

            //删除指定Index的行
            signFrame.deleteRow(rowIndex);

            //重新排列序号，如果没有序号，这一步省略
            for (i = rowIndex; i < signFrame.rows.length; i++) {
                signFrame.rows[i].cells[0].innerHTML = i.toString();
            }
        }

        //清空列表
        function ClearAllSign() {
            if (confirm('确定要清空所有字段吗？')) {
                var signFrame = findObj("SignFrame", document);
                var rowscount = signFrame.rows.length;
                //循环删除行,从最后一行往前删除
                for (i = rowscount - 1; i > 1; i--) {
                    signFrame.deleteRow(i);
                }
                //重置最后行号为1
                var txtTRLastIndex = findObj("txtTRLastIndex", document);
                txtTRLastIndex.value = "1";

//预添加一行
                {#AddSignRow();#}
            }
        }
            </script>
    {% block add_sign_row %}
        <script>
        function AddSignRow() {
            //读取最后一行的行号，存放在txtTRLastIndex文本框中
            var txtTRLastIndex = findObj("txtTRLastIndex", document);
            var rowID = parseInt(txtTRLastIndex.value);
            var signFrame = findObj("SignFrame", document);
            //添加行
            var newTR = signFrame.insertRow(signFrame.rows.length);
            newTR.id = "SignItem" + rowID;
            //添加列:序号
            var newNameTD = newTR.insertCell(0);
            //添加列内容
            newNameTD.innerHTML = newTR.rowIndex.toString();
            //添加列:字段
            var FieldTD = newTR.insertCell(1);
            //添加列内容
            FieldTD.innerHTML = "<input required class='form-control' style='margin-bottom: 2px; margin-top: 2px; height: 25px;' name='field_name" + rowID + "' id='field_name" + rowID + "' type='text' size='12' />";
            //添加列:类型
            var newTypeTD = newTR.insertCell(2);
            //添加列内容
            {#newTypeTD.innerHTML = "<input class='form-control' required style='margin-bottom: 2px; margin-top: 2px; height: 25px;' name='field_type" + rowID + "' id='field_type" + rowID + "' type='text' size='20'/>";#}
            newTypeTD.innerHTML = "<select class='form-control' required style='margin-bottom: 2px; margin-top: 2px; height: 25px; width: 60px' name='field_type" + rowID + "' id='field_type" + rowID + "' >" +
                "<option value='文本'>文本</option>" +
                "<option value='数字'>数字</option>" +
                "<option value='日期'>日期</option>" +
                "<option value='时间'>时间</option>" +
                "<option value='邮箱'>邮箱</option>" +
                "<option value='密码'>密码</option>" +
                "<option value='单选'>单选</option>" +
                "<option value='多选'>多选</option>" +
                "<option value='手机号'>手机号</option>" +
                "<option value='身份证号'>身份证号</option>" +
                {#"<option value='下拉'>下拉</option>" +#}
                "</select>";
            //添加列:枚举
            var newEnumTD = newTR.insertCell(3);
            //添加列内容
            newEnumTD.innerHTML = "<input class='form-control' placeholder='英文逗号分隔（单、多选）' style='margin-bottom: 2px; margin-top: 2px; height: 25px;width: 170px' name='enums" + rowID + "' id='enums" + rowID + "' type='text' size='20' />";
            //添加列:默认值
            var newDefaultTD = newTR.insertCell(4);
            //添加列内容
            newDefaultTD.innerHTML = "<input class='form-control' style='margin-bottom: 2px; margin-top: 2px; height: 25px; width: 75px' name='default_value" + rowID + "' id='default_value" + rowID + "' type='text' size='20' />";
            //添加列:必填
            var newRequiredTD = newTR.insertCell(5);
            newRequiredTD.innerHTML = "<select class='form-control' required style='margin-bottom: 2px; margin-top: 2px; height: 25px; width: 60px' name='required" + rowID + "'id='required" + rowID + "'><option value='是'>是</option><option value='否'>否</option></select>";
            //添加列:左边界
            var newMinTD = newTR.insertCell(6);
            //添加列内容
            newMinTD.innerHTML = "<input class='form-control' style='margin-bottom: 2px; margin-top: 2px; height: 25px; width: 65px' name='min" + rowID + "' id='max" + rowID + "' type='number' min='0' size='20' />";
            //添加列：右边界
            var newMaxTD = newTR.insertCell(7);
            newMaxTD.innerHTML = "<input class='form-control' style='margin-bottom: 2px; margin-top: 2px; height: 25px; width: 65px' name='max" + rowID + "' id='max" + rowID + "' type='number' min='0' size='20' />";
            //添加列:是否展示在列表
            var displayTD = newTR.insertCell(8);
            //添加列内容
            displayTD.innerHTML = "<select class='form-control' required style='margin-bottom: 2px; margin-top: 2px; height: 25px; width: 100px' name='display" + rowID + "'id='display" + rowID + "'><option value='是'>是</option><option value='否'>否</option></select>";
            var caseLevelTD = newTR.insertCell(9);
            //添加列内容
            caseLevelTD.innerHTML = "<select class='form-control' style='margin-bottom: 2px; margin-top: 2px; height: 25px; width: 100px' name='case_level" + rowID + "'id='case_level" + rowID + "'>" +
                "<option value='1'>1</option>" +
                "<option value='2'>2</option>" +
                "<option value='3'>3</option>" +
                "</select>";
            {#var caseIncludeTD = newTR.insertCell(10);#}
            {#//添加列内容#}
            {#caseIncludeTD.innerHTML = "<select class='form-control' style='margin-bottom: 2px; margin-top: 2px; height: 25px; width: 100px' name='case_include" + rowID + "'id='case_include" + rowID + "'>" +#}
            {#    "<option value='英文字符、数字、符号'>字母、数字、符号</option>" +#}
            {#    "<option value='英文字符'>英文字符</option>" +#}
            {#    "<option value=''>符号</option>" +#}
            {#    "</select>";#}
            var NumberOfDigitTD = newTR.insertCell(10);
            //添加列内容
            NumberOfDigitTD.innerHTML = "<input class='form-control' type='number' style='margin-bottom: 2px; margin-top: 2px; height: 25px; width: 50px' name='digitNum" + rowID + "'id='digitNum" + rowID + "'/>";
            //添加列:删除按钮
            var newDeleteTD = newTR.insertCell(11);
            //添加列内容
            newDeleteTD.innerHTML = "<div align='center' style='width:40px; font-size: 13px'><a href='javascript:;' onclick=\"DeleteSignRow('SignItem" + rowID + "')\">删除</a></div>";
            //将行号推进下一行
            txtTRLastIndex.value = (rowID + 1).toString();
        }

        </script>

    {% endblock %}
</head>
<body style="margin-left: 10px;margin-right: 10px;">
<script>
    function cascade() {
        var template_name=$("#template option:selected").val();
        let auth = $('#auth');
        let cur_selected = auth.val();
        let page_name = $('#page_name');
        let module1 = $('#module1');
        let module2 = $('#module2');
        let module3 = $('#module3');
        let creator_select = $("#creator");
        let creator_selected = creator_select.val();
        if(template_name !== "无"){
                    $.ajax({
            url: '/case_template/getId?template_name=' + template_name,
            type: 'get',
        {#    TODO  怎么获取django视图函数的返回值 #}
            success:function (data) {
                console.log(data);
                auth.val(data.project_name);
                auth.attr("readonly", true);
                page_name.val(data.page_name);
                {#page_name.attr("readonly", true);#}
                let module_str = data.module_name;
                let module_array = module_str.split(',');
                if(module_array.length===3){
                    module1.val(module_array[0]);
                    module2.val(module_array[1]);
                    module3.val(module_array[2]);
                    module1.attr('readonly', true);
                    module3.attr('readonly', true);
                    module2.attr('readonly', true)
                } else if(module_array.length===2){
                    module1.val(module_array[0]);
                    module2.val(module_array[1]);
                    module3.val("");
                    module1.attr('readonly', true);
                    module2.attr('readonly', true)
                    module3.attr('readonly', false)
                } else if(module_array.length===1){
                    module1.val(module_array[0]);
                    module2.val("");
                    module3.val("");
                    module1.attr("readonly", true);
                    module2.attr("readonly", false);
                    module3.attr("readonly", false);
                }
                creator_select.val(data.creator);
            }
        })
        }
        else {
            auth.get(0).selectedIndex=0;
            auth.attr("readonly", false);
            creator_select.get(0).selectedIndex=0;
            page_name.val("");
            page_name.attr("readonly", false);
            module1.val("");
            module2.val("");
            module3.val("");
            module1.attr("readonly", false);
            module2.attr("readonly", false);
            module3.attr("readonly", false);

        }
    }
</script>
<div class="table-responsive">
    <form class="form-inline" action="{% block generate_url %}{% url 'app01:new_page_generate_case' %}{% endblock %}" style="margin-top: 15px;" method="post"
          id="new_row_form">
        {% csrf_token %}
        <div style="margin-bottom: 15px;">
        <label for="template" class="label_cq_class">用例模板</label>
            <select class='form-control' onchange="cascade()" required style='margin-bottom: 2px; margin-top: 2px; height: 28px; width: 130px' name='template' id='template' >
                <option value="无">无</option>

                {% for template in templates %}
                    <option value="{{ template.template_name }}">{{ template.template_name }}</option>
                {% endfor %}
            </select>
            <label for="auth" class="label_cq_class">系统</label>
{#            <input class="form-control input-sm" placeholder="用于生成预置条件(必填)" required style="width: 165px;margin-right: 5px"#}
{#                   type="text" id="auth"#}
{#                   name="auth">#}
            <select class='form-control' required style='margin-bottom: 2px; margin-top: 2px; height: 28px; width: 132px' name='auth' id='auth' >
                            {% for project in projects %}
                                <option value="{{ project.project_name }}">{{ project.project_name }}</option>
                            {% endfor %}
                        </select>
            <label for="module1" class="label_cq_class">所属模块</label>
            <input class="form-control input-sm input_cq_class" style="width: 100px;" placeholder="一级模块(必填)" required type="text" id="module1"
                   name="module1">
            <input class="form-control input-sm input_cq_class" style="width: 100px;" type="text" placeholder="二级模块" id="module2"
                   name="module2">
            <input class="form-control input-sm input_cq_class" style="width: 100px;" type="text" placeholder="三级模块" id="module3"
                   name="module3">
            <br>
{#        TODO 页面名称、查看结果方式#}
           <label for="module1" class="label_cq_class">页面名称</label>
            <input class="form-control input-sm input_cq_class" style="width: 130px;margin-right: 0;" placeholder="{% block page_name_placeholder %}页面名称{% endblock %}" required type="text" id="page_name"
                   name="page_name">
        {% block check_result_method %}
        <label for="module1" class="label_cq_class">查看结果</label>
            <select required class="form-control select2-container input-sm" style="width: 133px;margin-right: 0;" id="check_result_method" name="check_result_method">
                <option value="页面查看">页面查看</option>
                <option value="数据库查看" selected="selected">数据库查看</option>
            </select>
        {% endblock %}
            <label for="creator" class="label_cq_class">创建人</label>
{#            <input required class="form-control input-sm" style="width: 165px;margin-right: 5px" placeholder="创建人(必填)"#}
{#                   type="text" id="creator" name="creator">#}
        <select class='form-control' required style='margin-bottom: 2px; margin-top: 2px; height: 28px; width: 95px' name='creator' id='creator' >
                            {% for user in users %}
                                <option value="{{ user.user_name }}">{{ user.user_name }}</option>
                            {% endfor %}
                        </select>
            <label for="creator" class="label_cq_class">UI用例</label>
            <select required class="form-control select2-container input-sm" style="width: 154px;margin-right: 5px" id="ui_case" name="ui_case">
                <option value="需要">需要</option>
                <option value="不需要" selected="selected">不需要</option>
            </select>
        </div>
{% block table %}
        <table width="800" border="1" cellpadding="2" cellspacing="1" id="SignFrame" class="table-primary">
            <div>
                <tr id="trHeader" style="font-size: 10px; height: 30px; width: 950px">
                    <td style="background: lightblue; width: 40px;">#</td>
                    <td style="background: lightblue">字段名</td>
                    <td style="background: lightblue">字段类型</td>
                    <td style="background: lightblue">枚举值</td>
                    <td style="background: lightblue">默认值</td>
                    <td style="background: lightblue">必填</td>
                    <td style="background: lightblue">左边界</td>
                    <td style="background: lightblue">右边界</td>
                    <td style="background: lightblue">列表展示</td>
                    <td style="background: lightblue">用例等级</td>
                    <td style="background: lightblue">位数</td>
                    <td align="center" style="background: lightblue"> </td>
                </tr>
                <tr>
                    <td>1</td>
                    <td><input required class='form-control' style='margin-bottom: 2px; margin-top: 2px; height: 25px;' name='field_name0' id='field_name0' type='text' size='12'></td>
                    <td><select class='form-control' required style='margin-bottom: 2px; margin-top: 2px; height: 25px; width: 60px' name='field_type0' id='field_type0' >" +
                            <option value='文本'>文本</option>
                            <option value='数字'>数字</option>
                            <option value='日期'>日期</option>
                            <option value='时间'>时间</option>
                            <option value='邮箱'>邮箱</option>
                            <option value='密码'>密码</option>
                            <option value='单选'>单选</option>
                            <option value='多选'>多选</option>
                            <option value='手机号'>手机号</option>
                            <option value='身份证号'>身份证号</option>
                        </select></td>
                    <td><input class='form-control' placeholder='英文逗号分隔（单、多选）' style='margin-bottom: 2px; margin-top: 2px; height: 25px;width: 170px' name='enums0' id='enums0' type='text' size='20' /></td>
                    <td><input class='form-control' style='margin-bottom: 2px; margin-top: 2px; height: 25px; width: 75px' name='default_value0' id='default_value0' type='text' size='20' /></td>
                    <td><select class='form-control' required style='margin-bottom: 2px; margin-top: 2px; height: 25px; width: 60px' name='required0' id='required0'><option value='是'>是</option><option value='否'>否</option></select></td>
                    <td><input class='form-control' style='margin-bottom: 2px; margin-top: 2px; height: 25px; width: 65px' name='min0' id='min0' type='number' min='0' size='20' /></td>
                    <td><input class='form-control' style='margin-bottom: 2px; margin-top: 2px; height: 25px; width: 65px' name='max0' id='max0' type='number' min='0' size='20' /></td>
                    <td><select class='form-control' required style='margin-bottom: 2px; margin-top: 2px; height: 25px; width: 100px' name='display0' id='display0'><option value='是'>是</option><option value='否'>否</option></select></td>
                    <td><select class='form-control' style='margin-bottom: 2px; margin-top: 2px; height: 25px; width: 100px' name='case_level0' id='case_level0'>
                            <option value='1'>1</option>
                            <option value='2'>2</option>
                            <option value='3'>3</option>
                            </select></td>
                    <td><input class='form-control' type='number' style='margin-bottom: 2px; margin-top: 2px; height: 25px; width: 50px' name='digitNum0' id='digitNum0'/></td>
{#                    <td><div align='center' style='width:40px; font-size: 13px'><a href='javascript:;' onclick="DeleteSignRow('SignItem1')">删除</a></div></td>#}
                </tr>
            </div>
        </table>
        {% endblock %}
        <input type="submit" onclick="window.location('{% block submit_url %}{% url "app01:new_row" %}{% endblock %}')" id="button_sub" value="提交">
    </form>

</div>
{% block button_group %}
<div>
    <input type="button" name="Submit" value="添加字段" onclick="AddSignRow()"/>
    <input type="button" name="Submit2" value="清空" onclick="ClearAllSign()"/>
    <input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1"/>
</div>
{% endblock %}
<h1 style="color: red">{% block error %}{% endblock %}</h1>
{% block back_link %}{% endblock %}

</body>
</html>